<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const type = ref('a');

  const topColumns = [
    { title: '能源类型', dataIndex: 'type', key: 'type', width: 90, align: 'center' },
    { title: '总用量', dataIndex: 'totalValue', key: 'totalValue', align: 'center' },
    { title: '总费用', dataIndex: 'totalCost', key: 'totalCost', align: 'center' },
    { title: '同比用量', dataIndex: 'value', key: 'value', align: 'center' },
    { title: '同比费用', dataIndex: 'cost', key: 'cost', align: 'center' },
  ];

  const topTableData = ref([
    {
      type: '电能',
      totalValue: '10000kWh',
      totalCost: '5000元',
      value: '9000kWh',
      cost: '4500元',
    },
    {
      type: '水能',
      totalValue: '5000m³',
      totalCost: '10000元',
      value: '4800m³',
      cost: '9600元',
    },
    {
      type: '气能',
      totalValue: '20000m³',
      totalCost: '60000元',
      value: '19000m³',
      cost: '5700元',
    },
    {
      type: '热能',
      totalValue: '15000GJ',
      totalCost: '750000元',
      value: '14000GJ',
      cost: '700000元',
    },
    {
      type: '冷能',
      totalValue: '12000GJ',
      totalCost: '48000元',
      value: '11000GJ',
      cost: '440000元',
    },
  ]);

  const bottomColumns = [
    { title: '报表日期', dataIndex: 'date', key: 'date', width: 120, align: 'center' },
    { title: '报表类型', dataIndex: 'type', key: 'type', align: 'center' },
    { title: '查看', dataIndex: 'operation', key: 'operation', align: 'center' },
  ];

  const bottomTableData = ref([
    {
      date: '2024-01-01',
      type: '年度',
    },
    {
      date: '2024-04-01',
      type: '季度',
    },
    {
      date: '2024-06-01',
      type: '月度',
    },
  ]);

  const rightColumns = [
    { title: '组织单元', dataIndex: 'unit', key: 'unit', width: 120, align: 'center' },
    { title: '能源类型', dataIndex: 'type', key: 'type', align: 'center' },
    { title: '用量', dataIndex: 'consumption', key: 'consumption', align: 'center' },
    { title: '费用', dataIndex: 'cost', key: 'cost', align: 'center' },
    { title: '同比用量', dataIndex: 'YOYConsumption', key: 'YOYConsumption', align: 'center' },
    { title: '同比费用', dataIndex: 'YOYCost', key: 'YOYCost', align: 'center' },
  ];

  const rightTableData = ref([
    {
      unit: '公司总部',
      type: '电能',
      consumption: '4000kWh',
      cost: '2000元',
      YOYConsumption: '3800kWh',
      YOYCost: '1900元',
    },
    {
      unit: '公司总部',
      type: '水能',
      consumption: '2000m³',
      cost: '4000元',
      YOYConsumption: '1900m³',
      YOYCost: '3800元',
    },
    {
      unit: '公司总部',
      type: '气能',
      consumption: '8000m³',
      cost: '24000元',
      YOYConsumption: '7600kWh',
      YOYCost: '22800元',
    },
    {
      unit: '公司总部',
      type: '热能',
      consumption: '6000GJ',
      cost: '300000元',
      YOYConsumption: '5800GJ',
      YOYCost: '290000元',
    },
    {
      unit: '公司总部',
      type: '冷能',
      consumption: '4800GJ',
      cost: '192000元',
      YOYConsumption: '4600GJ',
      YOYCost: '184000元',
    },
    {
      unit: '部门A',
      type: '电能',
      consumption: '3000kWh',
      cost: '1500元',
      YOYConsumption: '2800kWh',
      YOYCost: '1400元',
    },
    {
      unit: '部门A',
      type: '水能',
      consumption: '1500m³',
      cost: '3000元',
      YOYConsumption: '1400m³',
      YOYCost: '2800元',
    },
    {
      unit: '部门B',
      type: '气能',
      consumption: '12000m³',
      cost: '36000元',
      YOYConsumption: '11400kWh',
      YOYCost: '34200元',
    },
    {
      unit: '部门B',
      type: '热能',
      consumption: '9000GJ',
      cost: '450000元',
      YOYConsumption: '8600GJ',
      YOYCost: '430000元',
    },
    {
      unit: '部门B',
      type: '冷能',
      consumption: '7200GJ',
      cost: '288000元',
      YOYConsumption: '6800GJ',
      YOYCost: '272000元',
    },
  ]);

  function dblclick(params) {
    console.log(params);
  }
</script>

<template>
  <div class="container">
    <div class="condition">
      <span>报表类型:</span>
      <a-radio-group v-model:value="type" button-style="solid">
        <a-radio-button value="a">年度</a-radio-button>
        <a-radio-button value="b">季度</a-radio-button>
        <a-radio-button value="d">月度</a-radio-button>
      </a-radio-group>

      <a-button type="primary">生成</a-button>
    </div>

    <div class="info">
      <div class="left">
        <a-row :gutter="[10, 10]">
          <a-col :span="24">
            <a-card title="企业园区总体用量及费用">
              <a-table :columns="topColumns" :data-source="topTableData" rowKey="id"></a-table>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card title="历史报表列表">
              <a-table :columns="bottomColumns" :data-source="bottomTableData" rowKey="id">
                <template #bodyCell="{ column, text, record }">
                  <template v-if="column.dataIndex === 'operation'">
                    <a-button type="primary" @dblclick="dblclick(record)">双击查看</a-button>
                  </template>
                </template>
              </a-table>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <div class="right">
        <a-card title="按组织单元展开的用量及费用">
          <a-table :columns="rightColumns" :data-source="rightTableData" rowKey="id"> </a-table>
        </a-card>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .condition {
    margin: 10px 0;
    display: flex;
    align-items: center;
    span {
      margin: 0 10px;
    }

    .ant-select {
      width: 250px;
    }

    button {
      margin-left: 20px;
    }
  }

  .info {
    display: flex;
    .left {
      width: 50%;
      margin: 0 5px;

      .total {
        margin: 0 0 15px 0;
        font-size: 16px;
      }
      .ant-card {
        width: 100%;
        min-height: 400px;
      }
    }

    .right {
      width: 50%;
      margin: 0 5px;

      .ant-card {
        width: 100%;
        min-height: 928px;
      }
    }
  }
</style>
